<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap3-dialog </title>

    <!-- Bootstrap -->
    <link href=.../../statics/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href=.../../statics/css/font-awesome.min.css" rel="stylesheet"> 
	<!-- bootstrap3-dialog -->
	<link href=.../../statics/plugins/bootstrap3-dialog/css/bootstrap-dialog.min.css" rel="stylesheet"> 
	
	<!-- Custom Theme Style -->
    <link href=.../../statics/css/custom.css" rel="stylesheet"> 
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
         
        <!-- page content -->
        <div class="framebody" role="main" >
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>Bootstrap3-dialog</h3>
              </div>

              <div class="title_right">
                <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                              <button class="btn btn-default" type="button">Go!</button>
                          </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="clearfix"></div>

            <div class="row">

              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Bootstrap3-dialog <small></small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content"> 
                  		<a href="http://nakupanda.github.io/bootstrap3-dialog/">>>点击进入官方示例</a>
                  		<br/><br/>
                  		<p>遮罩全屏(在本地直接打开页面(浏览器中路径为file:///...)运行可能会报跨域问题，放在服务器上运行就不报错)</p>
						<div class="row">
							<button id="btnError" class="btn btn-danger">error警告框</button>
							<button id="btnSuccess" class="btn btn-success">Success提示框</button>
							<button id="btnCommon" class="btn btn-primary">普通提示框</button>
							<button id="btnConfirm" class="btn btn-warning">confirm确认选择框</button>
							<button id="btnIframe" class="btn">打开Iframe页面</button>
						</div>
						<p>只遮罩Iframe</p>
						<div class="row">
							<button id="btnError_iframe" class="btn btn-danger">error警告框</button>
							<button id="btnSuccess_iframe" class="btn btn-success">Success提示框</button>
							<button id="btnCommon_iframe" class="btn btn-primary">普通提示框</button>
							<button id="btnConfirm_iframe" class="btn btn-warning">confirm确认选择框</button>
						</div>
						
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->
      </div>
    </div>

    <!-- jQuery -->
    <script src=.../../statics/js/jquery.1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <script src=.../../statics/js/bootstrap.min.js"></script>  
    <!-- bootstrap3-dialog  -->
	<script src=.../../statics/plugins/bootstrap3-dialog/js/bootstrap-dialog.min.js"></script>   
    <!-- Custom Theme Scripts -->
    <script src=.../../statics/js/custom.js"></script>
	
	<script> 
		$(document).ready(function(){
			//在本地直接打开页面运行可能会报跨域问题，放在服务器上运行就不报错
			$("#btnError").on("click", function(){sys.showErr('Error Test', function(){alert("回调事件")})});
			$("#btnSuccess").on("click", function(){sys.showSuccess('Success Test', function(){alert("回调事件")})});
			$("#btnCommon").on("click", function(){sys.show('Common Test', function(){alert("回调事件")})});
			$("#btnConfirm").on("click", function(){sys.showConfirm('Confirm Test', function(){alert("点击成功按钮的回调事件")}, 
				function(){alert("点击取消按钮的回调事件")})});
				
			$("#btnError_iframe").on("click", function(){showErr('Error Test', function(){alert("回调事件")})});
			$("#btnSuccess_iframe").on("click", function(){showSuccess('Success Test', function(){alert("回调事件")})});
			$("#btnCommon_iframe").on("click", function(){show('Common Test', function(){alert("回调事件")})});
			$("#btnConfirm_iframe").on("click", function(){showConfirm('Confirm Test', function(){alert("点击成功按钮的回调事件")})});
			
			//打开Iframe模态窗体
			$("#btnIframe").on("click", function(){  
				sys.showRemote('iframePage.html', function(){  
					//获取从iframe页面传过来的变量
					var optFlag = sys.dialog.getData("success");
					if (optFlag == 1) {
						sys.showSuccess('保存成功');
					}
				}, {title: '此处设置标题', width: 800, height: 600});
			})
			 
		});
		 
	</script>
	
	
	
	
	
  </body>
</html>